<template>
  <div class="recharge">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="package-card">
          <template #header>
            <div class="card-header">
              <span>套餐选择</span>
            </div>
          </template>

          <el-row :gutter="20">
            <el-col :span="8" v-for="pkg in packages" :key="pkg.id">
              <div
                class="package-item"
                :class="{ active: selectedPackage?.id === pkg.id }"
                @click="selectPackage(pkg)"
              >
                <div class="package-name">{{ pkg.name }}</div>
                <div class="package-price">
                  <span class="currency">￥</span>
                  <span class="amount">{{ pkg.price }}</span>
                </div>
                <div class="package-original" v-if="pkg.originalPrice">
                  原价: ￥{{ pkg.originalPrice }}
                </div>
                <div class="package-quota">{{ pkg.quota }}条</div>
                <div class="package-duration">有效期{{ pkg.duration }}个月</div>
                <div class="package-features">
                  <div v-for="feature in pkg.features" :key="feature">
                    <el-icon><Check /></el-icon>
                    {{ feature }}
                  </div>
                </div>
                <el-tag
                  v-if="pkg.tag"
                  :type="pkg.tag.type"
                  class="package-tag"
                  effect="dark"
                >
                  {{ pkg.tag.text }}
                </el-tag>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- <el-card class="payment-card">
          <template #header>
            <div class="card-header">
              <span>支付方式</span>
            </div>
          </template>

          <div class="payment-methods">
            <div
              v-for="method in paymentMethods"
              :key="method.id"
              class="payment-method"
              :class="{ active: selectedMethod === method.id }"
              @click="selectedMethod = method.id"
            >
              <img :src="method.icon" :alt="method.name" class="method-icon" />
              <span class="method-name">{{ method.name }}</span>
              <el-icon v-if="selectedMethod === method.id"><Select /></el-icon>
            </div>
          </div>
        </el-card> -->
      </el-col>

      <el-col :span="8">
        <el-card class="order-card">
          <template #header>
            <div class="card-header">
              <span>订单详情</span>
            </div>
          </template>

          <div v-if="selectedPackage" class="order-details">
            <div class="detail-item">
              <span class="label">套餐名称</span>
              <span class="value">{{ selectedPackage.name }}</span>
            </div>
            <div class="detail-item">
              <span class="label">额度</span>
              <span class="value">{{ selectedPackage.quota }}条</span>
            </div>
            <div class="detail-item">
              <span class="label">有效期</span>
              <span class="value">{{ selectedPackage.duration }}个月</span>
            </div>
            <el-divider />
            <div class="detail-item total">
              <span class="label">支付金额</span>
              <span class="value price">
                ￥{{ selectedPackage.price }}
              </span>
            </div>

            <el-button
              type="primary"
              class="pay-button"
              :disabled="!selectedMethod"
              @click="handlePay"
              :loading="loading"
            >
              立即支付
            </el-button>

            <div class="order-tips">
              <el-icon><InfoFilled /></el-icon>
              <span>支付完成后额度将立即到账</span>
            </div>
          </div>

          <div v-else class="empty-order">
            <el-empty description="请选择套餐" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 支付二维码弹窗 -->
    <el-dialog
      v-model="qrCodeVisible"
      title="扫码支付"
      width="400px"
      center
      :close-on-click-modal="false"
    >
      <div class="qrcode-content">
        <div class="qrcode-amount">
          ￥<span>{{ selectedPackage?.price || 0 }}</span>
        </div>
        <div class="qrcode-image">
          <el-image src="https://placeholder.co/200" />
        </div>
        <div class="qrcode-tips">
          <p>请使用{{ getPaymentMethodName }}扫码支付</p>
          <p>支付完成后将自动刷新额度</p>
        </div>
      </div>
      <div class="qrcode-timer" v-if="qrCodeVisible">
        <el-progress
          type="circle"
          :percentage="paymentTimePercentage"
          :status="paymentTimePercentage <= 20 ? 'exception' : ''"
        />
        <div class="timer-text">
          <template v-if="paymentTimePercentage > 0">
            请在{{ formatTime(paymentTimeLeft) }}内完成支付
          </template>
          <template v-else>
            二维码已过期，请重新发起支付
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Check, Select, InfoFilled } from '@element-plus/icons-vue'

const loading = ref(false)
const packageType = ref('normal')
const selectedPackage = ref(null)
const selectedMethod = ref(null)
const qrCodeVisible = ref(false)
const paymentTimeLeft = ref(300) // 5分钟支付时间
const paymentTimer = ref(null)

// 套餐数据
const packages = ref([
  {
    id: 1,
    name: '试用卡',
    price: 0.0,
    originalPrice: 9.9,
    quota: 1000,
    duration: 1,
    features: ['支持所有应用', '7x24小时服务', '技术支持'],
    tag: { type: 'success', text: '试用' }
  },
  {
    id: 1,
    name: '包月卡',
    price: 9.9,
    originalPrice: 199,
    quota: 1000,
    duration: 1,
    features: ['支持所有应用', '7x24小时服务', '技术支持'],
    //tag: { type: 'success', text: '新手特惠' }
  },
  {
    id: 2,
    name: '包季卡',
    price: 23.7,
    originalPrice: 29.7,
    quota: 5000,
    duration: 3,
    features: ['支持所有应用', '7x24小时服务', '技术支持'],
    tag: { type: '', text: '8折优惠' }
  },
  {
    id: 3,
    name: '半年卡',
    price: 41.5,
    originalPrice: 1299,
    quota: 20000,
    duration: 12,
    features: ['支持所有应用', '7x24小时服务', '技术支持'],
    tag: { type: 'warning', text: '7折优惠' }
  },
  {
    id: 4,
    name: '包年卡',
    price: 88,
    originalPrice: 1299,
    quota: 20000,
    duration: 12,
    features: ['支持所有应用', '7x24小时服务', '技术支持'],
    tag: { type: 'warning', text: '超值优惠' }
  }
])

// 支付方式
const paymentMethods = ref([
  {
    id: 'alipay',
    name: '支付宝支付',
    icon: 'https://placeholder.co/40'
  },
  {
    id: 'wechat',
    name: '微信支付',
    icon: 'https://placeholder.co/40'
  }
])

// 选择套餐
const selectPackage = (pkg) => {
  selectedPackage.value = pkg
}

// 获取选中的支付方式名称
const getPaymentMethodName = computed(() => {
  const method = paymentMethods.value.find(m => m.id === selectedMethod.value)
  return method ? method.name : ''
})

// 计算支付倒计时百分比
const paymentTimePercentage = computed(() => {
  return Math.round((paymentTimeLeft.value / 300) * 100)
})

// 格式化时间
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 开始支付倒计时
const startPaymentTimer = () => {
  paymentTimeLeft.value = 300
  clearInterval(paymentTimer.value)
  
  paymentTimer.value = setInterval(() => {
    if (paymentTimeLeft.value > 0) {
      paymentTimeLeft.value--
    } else {
      clearInterval(paymentTimer.value)
      qrCodeVisible.value = false
      ElMessage.warning('支付超时，请重新发起支付')
    }
  }, 1000)
}

// 处理支付
const handlePay = async () => {
  if (!selectedPackage.value || !selectedMethod) return
  
  loading.value = true
  try {
    // 模拟获取支付二维码
    await new Promise(resolve => setTimeout(resolve, 1000))
    qrCodeVisible.value = true
    startPaymentTimer()
  } finally {
    loading.value = false
  }
}

// 组件卸载时清理定时器
onUnmounted(() => {
  clearInterval(paymentTimer.value)
})
</script>

<style scoped>
.recharge {
  padding: 20px;
}

.package-card,
.payment-card,
.order-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.package-item {
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.package-item:hover,
.package-item.active {
  border-color: #409EFF;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.package-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.package-price {
  margin: 15px 0;
}

.currency {
  font-size: 16px;
  color: #409EFF;
}

.amount {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
}

.package-original {
  color: #909399;
  text-decoration: line-through;
  font-size: 12px;
  margin-bottom: 10px;
}

.package-quota {
  font-size: 16px;
  color: #606266;
  margin-bottom: 5px;
}

.package-duration {
  font-size: 14px;
  color: #606266;
  margin-bottom: 15px;
}

.package-features {
  text-align: left;
  color: #606266;
  font-size: 14px;
}

.package-features > div {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.package-tag {
  position: absolute;
  top: 10px;
  right: 10px;
}

.payment-methods {
  display: flex;
  gap: 20px;
}

.payment-method {
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-method:hover,
.payment-method.active {
  border-color: #409EFF;
  background-color: #F5F7FA;
}

.method-icon {
  width: 24px;
  height: 24px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #606266;
}

.detail-item.total {
  font-size: 16px;
  font-weight: bold;
}

.price {
  color: #F56C6C;
}

.pay-button {
  width: 100%;
  margin-top: 20px;
}

.order-tips {
  margin-top: 15px;
  color: #909399;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.qrcode-content {
  text-align: center;
}

.qrcode-amount {
  font-size: 20px;
  color: #F56C6C;
  margin-bottom: 20px;
}

.qrcode-amount span {
  font-size: 32px;
  font-weight: bold;
}

.qrcode-image {
  margin: 20px 0;
}

.qrcode-tips {
  color: #606266;
  font-size: 14px;
  margin: 20px 0;
}

.qrcode-timer {
  text-align: center;
  margin-top: 20px;
}

.timer-text {
  margin-top: 10px;
  color: #606266;
}
</style>
